<template>
    <div class="userList-nav">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单详情</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="table-nav">
            <!-- 搜索 -->
            <div class="search-nav">
                <el-input v-model="searchInput" style="width: 20%; min-width: 100px" placeholder="Please Input"
                    size="large" clearable @clear="getList()">
                    <template #append>
                        <el-button icon="Search" @click="searchUser()" />
                    </template>
                </el-input>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <el-table :data="orderList" border stripe style="width: 100%" :max-height="500">
                <el-table-column type="index" width="50" />
                <el-table-column prop="order_id" label="订单编号" min-width="100" />
                <el-table-column prop="order_price" label="订单价格" min-width="100" />
                <el-table-column label="是否付款" min-width="100">
                    <template #default="scope">
                        <div>
                            <el-tag v-if="scope.row.pay_status == '0'" class="ml-2" type="danger">未付款</el-tag>
                            <el-tag v-else class="ml-2" type="success">已付款</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_send" label="是否发货" min-width="100" />
                <el-table-column label="下单时间" min-width="100">
                    <template #default="scope">
                        <div>
                            <span>{{ new Date(scope.row.create_time * 1000).toLocaleString() }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="250">
                    <template #default="scope">
                        <div>
                            <!-- 修改按钮 -->
                            <set-order-com :scope="scope" :getList=getList />
                            <!-- 删除按钮 -->
                            <logistics-com :scope="scope" :getList=getList></logistics-com>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-nav">
                <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[1, 5, 10, 50]"
                    :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="changePage" @current-change="changePage" />
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { reactive, ref } from 'vue';
import { getOrderList } from '@/api/order'
import SetOrderCom from "@/components/order/SetOrderCom.vue"
import LogisticsCom from "@/components/order/LogisticsCom.vue"
let searchInput = ref('')
let orderList = reactive([]);
let pagenum = ref(1);
let pagesize = ref(5);
let total = ref(0);
const getList = async (params) => {
    let res = await getOrderList({
        pagenum: pagenum.value,
        pagesize: pagesize.value,
        ...params

    });
    orderList.splice(0);
    total.value = res.data.total
    orderList.push(...res.data.goods);
}
getList();
const searchUser = () => {
    getList({ query: searchInput.value });
};
const changePage = () => {
    getList();
};
</script>
  
<style lang="scss" scoped>
.userList-nav {
    position: relative;
    width: 100%;
    // height: 100%;
    overflow: auto;

    .table-nav {
        position: absolute;
        width: 100%;
        // max-height: 100%;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 10px;
        background-color: white;
        overflow: hidden;

        .el-table {
            margin: 20px 0;
        }

        .pagination-nav {}
    }
}
</style>